<template>
<div>
  <div class="avatar-position">
    <div  class="my-avatar">
      <el-avatar :size="250" :src="userInfo.userFace" @click.native="handleChangeImg">
      </el-avatar>
    </div>
  </div>
  <div class="descriptions">
    <el-descriptions class="margin-top" title="个人信息" :column="3" size="medium" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="infoDialogVisible = true">修改信息</el-button>
        <el-button type="danger" size="small" @click="passDialogVisible = true">修改密碼</el-button>
      </template>
      <el-descriptions-item label="用户名">{{ userInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>

      <el-descriptions-item label="用户标签">
        <el-tag size="small" v-for="(r, index) in userInfo.roles" :key="index">
          {{r.nameZh}}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="居住地址">{{ userInfo.address }}</el-descriptions-item>
    </el-descriptions>
  </div>
  <div>
    <el-dialog
      title="更换头像"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      >

      <div class=" upload-position">
        <el-upload
          action=""
          class="upload-demo"
          drag
          :limit="1"
          :auto-upload="true"
          :http-request="uploadImage"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>

<!--    <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--   </span>-->
    </el-dialog>
    <el-dialog
      title="更改密码"
      :visible.sync="passDialogVisible"
      width="30%"
      append-to-body
    >
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPass">
            <el-input type="password" v-model="ruleForm.oldPass"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      title="更改密码"
      :visible.sync="infoDialogVisible"
      width="30%"
      append-to-body
    >
      <div>
        <el-form :model="admin" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户昵称" prop="oldPass">
            <el-input type="text" v-model="admin.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="pass">
            <el-input type="text" v-model="admin.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="居住地址" prop="checkPass">
            <el-input type="textarea" v-model="admin.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateInfo">提交</el-button>
            <el-button @click="infoDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import fileAPI from "../../api/file";
import loginAPI from "../../api/login"
import adminAPI from "../../api/admin";
export default {
  name: "Info",
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      userInfo: {},
      admin:{},
      dialogVisible:false,
      passDialogVisible:false,
      infoDialogVisible:false,
      ruleForm: {
        pass: '',
        checkPass: '',
        oldPass: '',
      },
      rules: {
        oldPass: [
          { validator: validateOldPass, trigger: 'blur' },
          { required: true, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { required: true, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          { required: true, trigger: 'blur' }
        ],

      }
    }
  },
  methods: {
    handleChangeImg(){
      this.dialogVisible = true
    },
    uploadImage(file){
      if (file){
        const params = new FormData();
        params.append('file',file.file)
        params.append('adminId',this.userInfo.id)
        fileAPI.uploadImg(params).then(res => {
          if (res){
            this.initAdmin()
            this.dialogVisible = false;
          }
        })
      }
    this.initAdmin()
      console.log(file);
    },
    getAdminInfo(){
      loginAPI.getAdminInfo().then(res =>{
        if (res){
          this.userInfo  = res.data
          this.admin = Object.assign({},this.userInfo)
        }
      })
    },
    initAdmin(){
      loginAPI.getAdminInfo().then(res =>{
        if (res){
          this.userInfo = res.data
          this.admin = Object.assign({},this.userInfo)
          window.sessionStorage.setItem('userInfo',JSON.stringify(res.data))
          this.$store.commit('INIT_ADMIN',res.data)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.adminId = this.userInfo.id
          adminAPI.updatePass(this.ruleForm).then(res => {
            console.log(res)
            if (res) {
              //更新密码成功 退出登录
              sessionStorage.removeItem('userInfo');
              sessionStorage.removeItem('token');
              this.$store.commit('initRoutes', []);
              loginAPI.logout();
              this.$router.replace('/')
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCancel(){
      this.$refs["ruleForm"].resetFields();
      this.passDialogVisible = false;
    },
    updateInfo(){
      adminAPI.updateAdmin(this.admin).then(res => {
        if (res){
          this.infoDialogVisible = false;
          this.initAdmin();
        }
      })
    },
  },
  mounted() {
    this.getAdminInfo()
  }
}
</script>

<style>
.avatar-position{
  display: flex;
  justify-content: center;
}
.my-avatar{
    height: 252px;
    width: 252px;
    border-radius: 200px;
}
.my-avatar:hover ::before{
  font-size: 20px;
  cursor: pointer;
  content: "点击更换";
  position: fixed;
  left: 933px;
  right: 736px;
  bottom: 572px;
  top: 113px;
  border-radius: 200px;
  background-color: rgba(0, 0, 0, .5);
  z-index: 2;
}
.descriptions{

  margin-top: 50px;
  width: 100%;
}
.upload-position{
  display: flex;
  justify-content: center;
}

</style>
